<template>
    <div class="fireworks" @click="shootFire($event)" id="fireworks">
        <div size="small" @click.stop="autoPlay" style="cursor: pointer; font-size: 12px; padding: 5px;">自动播放</div>
        <div size="small" @click.stop="cancelAutoPlay" style="cursor: pointer; font-size: 12px; padding: 5px;">取消播放
        </div>
    </div>
</template>

<script setup>
import useFire from '@/views/animate/fire.js'

const {
    shootFire,
    cancelAutoPlay,
    autoPlay
} = useFire()

</script>

<style lang="scss" scoped>
.fireworks {
    position: relative;
    background-color: #000000;
    height: calc(100vh - 105px);
    width: 100%;

    color: #ffee8d;
}
</style>